// Webpack 的构建流程可以分为 一条清晰的生命周期管线，从启动构建到输出打包结果，大致分为 6 个阶段：

// 🧭 Webpack 构建流程总览
    初始化配置 → 创建 Compiler → 启动编译 → 构建 Module → 生成 Chunk → 输出文件

// 🧱 1. 初始化参数
    Webpack 会根据 webpack.config.js 或 CLI 指令读取配置，合并默认配置和用户配置。

    // 你的 webpack.config.js
    module.exports = {
        entry: './src/index.js',
        output: { filename: 'bundle.js' },
        // ...
    };

    Webpack 会把这些配置整理成一个内部的 options 对象，供后续使用。


// 🛠️ 2. 创建 Compiler 对象
    Webpack 用配置初始化一个 Compiler 实例，这是整个构建流程的核心对象：
        加载插件：根据配置加载所有插件，并调用插件的 apply 方法
        注册事件钩子（如 compile、emit、done）

// 🚦 3. 开始编译（compile）
    Webpack 从入口文件（如 entry: './src/index.js'）开始：
        调用 compiler.run() 开始执行构建
        触发各个插件的生命周期钩子

// 🧩 4. 构建模块（build modules）

    从入口文件开始，调用 loader 对文件进行转换

    // Acorn，一个著名的 JavaScript 解析器
    /**
     它用于将 JS 代码解析成 AST（抽象语法树），Webpack、Rollup、Babel 内部都可能用到。
        用法示例：
        const acorn = require('acorn');
        const ast = acorn.parse('const x = 1');
        console.log(ast);
     */

    使用 Acorn 解析转换后的代码生成 AST
    分析 AST 中的 require/import 语句，找出依赖模块
    递归处理所有依赖，构建完整的模块依赖图

// 🧱 5. Chunk 构建与代码生成
    Webpack 会根据每个入口点生成一个 Chunk（代码块）：
    每个 Chunk 包含多个模块
    然后把这些模块打包成一个或多个最终的 文件（Asset）
    这一步会用到 optimization.splitChunks 等策略来决定如何分包。

// 🧾 6. 输出资源（emit assets）
    最后，Webpack 会：
    根据 Chunk 生成最终的 .js 或 .css 文件
    写入到你配置的 output.path 目录中
    触发 emit 钩子，供插件（如 HtmlWebpackPlugin）处理 HTML、拷贝资源等


// 🧪 构建过程总结（流程图）
初始化配置
   ↓
创建 Compiler
   ↓
调用 run() 启动编译
   ↓
  编译入口模块
   ↓
递归构建依赖图（Module Graph）
   ↓
生成 Chunk（按入口/路由）
   ↓
生成最终文件（bundle.js / *.css）
   ↓
写入磁盘


// 🔧 生命周期钩子（插件核心）
    Webpack 插件可以基于生命周期钩子做很多事，例如：
        | 钩子名                                | 说明       |
        | ---------------------------------- | -------- |
        | `compiler.hooks.compile`           | 构建开始     |
        | `compiler.hooks.emit`              | 即将输出资源   |
        | `compiler.hooks.done`              | 构建完成     |
        | `compilation.hooks.buildModule`    | 构建某个模块   |
        | `compilation.hooks.optimizeChunks` | 优化 Chunk |

✨ 总结
    | 阶段             | 内容             |
    | -------------- | -------------- |
    | 1. 初始化配置       | 读取并合并配置        |
    | 2. 创建 Compiler | 挂载插件、创建对象      |
    | 3. 编译入口模块      | 从 entry 开始递归依赖 |
    | 4. 构建模块图       | 用 loader 处理源码  |
    | 5. 生成 chunk    | 合并模块形成 bundle  |
    | 6. 写入输出文件      | 输出到指定目录        |


🧭 Webpack 构建流程图（图解版）

 ┌────────────────────────────┐
 │ 1. 初始化配置（webpack.config.js）│
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 2. 创建 Compiler 对象         │
 │ - 初始化插件 apply()        │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 3. 调用 compiler.run()      │
 │ - 开始编译流程              │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 4. 创建 Compilation 实例     │
 │ - 开始构建每个模块           │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 5. 构建模块 Module          │
 │ ┌─→ 调用 Loader 转换源码    │
 │ └─→ 递归解析依赖（AST）    │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 6. 完成模块依赖图构建        │
 │ - 所有模块形成 ModuleGraph │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 7. 根据入口生成 Chunk       │
 │ - 根据 SplitChunks 拆分    │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 8. 生成最终资源 Asset        │
 │ - 每个 Chunk 转成 .js/.css │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 9. 调用 emit 钩子            │
 │ - 插件修改或增加资源        │
 └──────────────┬─────────────┘
                ↓
 ┌────────────────────────────┐
 │ 10. 输出写入硬盘（dist/）    │
 └────────────────────────────┘


